<template>
  <div class="container">
    <normal-title
      title='发票管理'
      :back="true"
    ></normal-title>
    <div class="type">
      <div class="item">
        <div class="name">公司名称<span class="require">*</span></div>
        <input
          type="text"
          placeholder="请输入你的公司名称"
          class="input"
          placeholder-class="placeholder-style"
          v-model="company"
        >
      </div>
      <div class="line"></div>
      <img
        @click="choiceinvoiceType(1)"
        class="choice-img"
        :src="invoiceType==1?'../../images/choice-sel.png':'../../images/choice-nor.png'"
        mode="aspectFit"
      >
      <div class="item">
        <div class="name">税号<span class="require">*</span></div>
        <input
          type="text"
          placeholder="请输入你的公司税号"
          class="input"
          placeholder-class="placeholder-style"
          v-model="tax"
        >
      </div>
      <img
        class="type-img"
        src="../../images/company.png"
        mode="widthFix"
      >
    </div>
    <div class="type">
      <div class="item">
        <div class="name">姓名<span class="require">*</span></div>
        <input
          type="text"
          placeholder="请输入你的姓名"
          class="input"
          placeholder-class="placeholder-style"
          v-model="userName"
        >
      </div>
      <img
        @click="choiceinvoiceType(2)"
        class="choice-img"
        :src="invoiceType==2?'../../images/choice-sel.png':'../../images/choice-nor.png'"
        mode="aspectFit"
      >
      <img
        class="type-img"
        src="../../images/personal.png"
        mode="widthFix"
      >
    </div>
    <div class="prompt">温馨提示：上述两者只能选其一</div>
    <div class="row btn-group">
      <div
        class="btn"
        @click="saveStutas(invoiceType)"
      >保存</div>
    </div>
  </div>
</template>

<script>
import NormalTitle from '@/components/NormalTitle'
import { request } from '@/utils'
export default {
  components: {
    NormalTitle
  },
  data () {
    return {
      invoiceInfo: undefined,
      invoiceType: 0, // 0不开发票 1企业 2个人
      company: '',
      tax: '',
      userName: ''
    }
  },
  methods: {
    async getInvoiceInfo () {
      var res = await request('/v1/order/get-user-receipt', 'get')
      if (res.data.success) {
        var invoiceInfo = res.data.data
        this.company = invoiceInfo.company || ''
        this.tax = invoiceInfo.tax_number || ''
        this.userName = invoiceInfo.name || ''
      }
    },
    choiceinvoiceType (status) {
      if (this.invoiceType !== status) {
        this.invoiceType = status
      } else {
        this.invoiceType = 0
      }
    },
    async saveStutas (stutas) {
      var pages = getCurrentPages()
      var prevPage = pages[pages.length - 2]
      prevPage.receipt = {}
      if (stutas === 0) {
        prevPage.receipt = {
          name: '普通个人不开发票',
          id: null
        }
        wx.navigateBack({
          delta: 1
        })
        return
      } else if (stutas === 1) {
        if (this.tax.trim() === '' || this.company.trim() === '') {
          wx.showToast({
            title: '请先填写企业发票信息',
            icon: 'none'
          })
          return
        }
        prevPage.receipt.name = this.company
      } else if (stutas === 2) {
        if (this.userName.trim() === '') {
          wx.showToast({
            title: '请先填写个人发票信息',
            icon: 'none'
          })
          return
        }
        prevPage.receipt.name = this.userName
      }
      var data = {
        type: stutas,
        company: this.company,
        tax_number: this.tax,
        name: this.userName
      }
      var res = await request('/v1/order/save-receipt', 'post', data)
      prevPage.receipt.id = res.data.data
      wx.navigateBack({
        delta: 1
      })
    }
  },
  mounted () {
    this.getInvoiceInfo()
  }
}
</script>

<style>
page {
  height: 100%;
  background: #f0f0f0;
}
</style>

<style scoped lang="scss">
.container {
  font-size: 26rpx;
  .type {
    background: #fff;
    margin: 25rpx 25rpx;
    border-radius: 25rpx;
    padding: 25rpx;
    position: relative;
    .name {
      font-size: 32rpx;
      margin-bottom: 20rpx;
      .require {
        color: #bf4c4b;
      }
    }
    .line {
      height: 3rpx;
      width: 580rpx;
      background: #f0f0f0;
      margin: 25rpx 0;
    }
    .choice-img {
      width: 40rpx;
      height: 40rpx;
      position: absolute;
      top: 50%;
      right: 40rpx;
      margin-top: -20rpx;
    }
    .input {
      height: 60rpx;
      color: #737373;
      font-size: 28rpx;
      width: 580rpx;
    }
    .type-img {
      width: 40rpx;
      height: 40rpx;
      border-radius: 0 25rpx 0 0;
      position: absolute;
      top: 0;
      right: 0;
    }
  }
  .prompt {
    font-size: 24rpx;
    text-align: center;
    color: #6e6e6e;
  }
  .btn-group {
    justify-content: center;
    margin-top: 25rpx;
    .btn {
      font-size: 28rpx;
      width: 200rpx;
      height: 60rpx;
      border-radius: 30rpx;
      color: #fff;
      background: #cdb27e;
      text-align: center;
      line-height: 58rpx;
      margin: 0 25rpx;
    }
  }
}
</style>




